<template>
    <div class="container question-icon" v-if="question" label="题目详情">
        <div>
            <div class="col-title">
                <!-- 题目 -->
                <div class="">
                    <b class="text-title">{{ question.ID }}.{{ question.name }}</b>
                    <span v-if="question.source" class="question-source">{{ question.source }}
                    </span>
                </div>
            </div>
            <div class="question-intr">
                <span>时间限制：{{ question.timelimit ? Number(question.timelimit) : 200 }}ms</span>
                <span>内存限制： {{ question.memorylimit ? Number(question.memorylimit) : 128 }}MB</span>
                <span>难度：
                    <div :class="`difficulty-${question.difficulty}`">
                        {{ question.difficulty ? DATAdifficulty[question.difficulty] : '' }}
                    </div>
                </span>
                <span :style="{ padding: 0, textAlign: 'right' }">
                    <div class="btn-group" role="group" aria-label="First group">
                        <button type="button" class="btn btn-sm" :class="font === 14 ? 'btn-dark' : 'btn-secondary'"
                            @click="font = 14">小</button>
                        <button type="button" class="btn btn-sm" :class="font === 18 ? 'btn-dark' : 'btn-secondary'"
                            @click="font = 18">大</button>
                    </div>
                </span>
            </div>
        </div>
        <div>
            <!-- <slot></slot> -->
            <contextlist v-bind="{ question }" :style="{ '--font-size': font + 'px' }"></contextlist>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ElMessage, ElMessageBox, ElNotification, ElOption, ElSelect } from 'element-plus';
import { computed, h, ref, watch } from 'vue';
import { useStore } from 'vuex';
import { asynccopyquestion } from '../../../api';
import { Storekey } from '../../../interface';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
import contextlist from "../../components/watchQuestion/contextlist.vue";
import { DATAdifficulty } from "../../../index/data/data";

const questionfont = localStorage.getItem('questionfont')
const font = ref(questionfont ? Number(questionfont) : 14);
const t = defineProps<{ question: Studycodemodel.Iquestion, }>()

const store = useStore(Storekey)
const getuser = computed(() => {
    return store.state.user
})

const team = computed(() => {
    return store.state.team?.rows || []
})
const getlabel = computed(() => {
    return store.state.label?.rows || []
})

watch(() => font.value, e => {
    localStorage.setItem('questionfont', String(e))
})


const open1 = () => {
    const checked = ref<number>()
    ElMessageBox({
        title: '请选择团队',
        message: () =>
            h(ElSelect, {
                modelValue: checked.value,
                'onUpdate:modelValue': (val: number) => {
                    checked.value = val
                },
            },
                team.value.map(e => {
                    return h(ElOption, {
                        label: e.name,
                        value: Number(e.ID)
                    })
                })
            ),
    }).then((e) => {
        if (!checked.value) {
            ElMessage.error('请选择团队')
            return
        }
        asynccopyquestion({ ID: t.question.ID, teamid: checked.value }).then(c => {
            ElNotification({
                title: '提示',
                message: '该题已复制到【团队题目】，您可以在创建任务、创建比赛时在【团队题目】中找到该题。',
                duration: 0,
            })
        }).catch(f => {
            ElMessage.error(f)
        })
    }).catch(c => {

    })
}

async function copy() {
    ElMessageBox.confirm("复制为我的题目后，您可以在“题目列表-我的题目”中进行查看", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info",
    }).then(() => {
        asynccopyquestion({ ID: t.question.ID }).then(c => {
            ElNotification({
                title: '提示',
                message: '该题已复制到【我的题目】，您可以在创建任务、创建比赛时在【我的题目】中找到该题。',
                duration: 0,
            })
        }).catch(f => {
            ElMessage.error(f)
        })
    }).catch(c => {

    })

}

</script>

<style scoped>
.col-title {
    margin: 20px 0;
}

.question-source {
    background-color: #F6F6F6;
    color: #8C8C8C;
    font-size: 14px;
    height: 26px;
    border-radius: 4px;
    display: inline-block;
    padding: 4px 8px;
    line-height: 18px;
    transform: translateY(-3px);
    margin-left: 12px;
    font-weight: 400
}

.problem-tag {
    display: inline-block;
}

/* 显示标签 */
.problem-tag-label {
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 1);
    border: 1px solid rgba(70, 131, 250, 1);
    width: 105px;
    height: 32px;
    line-height: 32px;
}

.problem-tag-label-icon {
    display: inline-block;
    margin-left: 4px;
    /* height: 1ex !important; */
}

.problem-tag-item {
    span {
        margin: 2px;
    }
}

.problem-menu {
    float: right;

    span {
        margin-left: 10px
    }
}

.question-intr {
    margin-top: 14px;
    border-radius: 4px;
    border: 1px solid #f0f0f0;
    background: #fbfbfb;
    padding: 10px;
    line-height: 1.8;
    margin-bottom: 10px;
    font-size: 13px;

    display: flex;
    flex-wrap: wrap;

    /* align-items: center; */
    span {
        display: inline-block;
        margin: 10px 40px 0 0;
    }
}
</style>
